<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    title="导入模板"
    width="520"
    @ok="handleSave"
  >
    <BasicForm @register="registerForm" />
    <template #appendFooter>
      <a-button type="primary" @click="handleSaveAndAdd">
        <Icon icon="ant-design:plus-outlined" />
        保存并新增
      </a-button>
    </template>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { BasicForm, useForm } from '@/components/Form';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { Icon } from '@/components/Icon';
  import { save } from '@/api/sys/sysImportExcelTemplate';
  import { SysImportExcelTemplate } from '@/api/sys/model/sysImportExcelTemplateModel';
  import { selectTable } from '@/api/generator/generator';
  import { SelectModel } from '@/api/model/selectModel';
  import { message } from 'ant-design-vue';

  export default defineComponent({
    name: 'SysImportExcelTemplateInput',
    components: { Icon, BasicForm, BasicDrawer },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      let tableArray: SelectModel[] = [];
      const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue }] = useForm({
        schemas: [
          { field: 'id', label: 'id', component: 'Input', show: false },
          { field: 'version', label: 'version', component: 'Input', show: false },
          {
            field: 'importTable',
            label: '表',
            required: true,
            component: 'ApiSelect',
            componentProps: {
              api: selectTable,
              params: {
                dataSource: 'master',
              },
              afterFetch: (result) => {
                tableArray = cloneDeep(result);
                result.map((item) => {
                  item.label = `${item.value} - ${item.label}`;
                });
                return result;
              },
              onChange: (value) => {
                handleTableChange(value);
              },
            },
            itemProps: { validateTrigger: 'blur', extra: '需要导入数据的表' },
          },
          {
            field: 'name',
            label: '模板名称',
            required: true,
            component: 'Input',
            rules: [{ max: 64, message: '模板名称不能超过64个字符', trigger: 'blur' }],
          },
          {
            field: 'startRow',
            label: '起始行',
            required: true,
            component: 'InputNumber',
            rules: [
              { type: 'number', max: 99, message: '起始行不能大于99', trigger: 'blur' },
              { type: 'number', min: 0, message: '起始行不能小于0', trigger: 'blur' },
            ],
            itemProps: {
              extra: '系统将从“起始行”开始读取Excel数据',
            },
          },
          {
            field: 'callback',
            label: '回调Bean',
            required: true,
            component: 'Input',
            rules: [{ max: 255, message: '回调不能超过255个字符', trigger: 'blur' }],
            itemProps: {
              extra: 'Bean需要实现com.easy.admin.sys.service.ImportService接口',
            },
          },
          {
            field: 'importCode',
            label: '模板代码',
            required: true,
            component: 'Input',
            rules: [{ max: 64, message: '模板代码不能超过64个字符', trigger: 'blur' }],
            itemProps: {
              extra: '导入模板唯一标识',
            },
          },
          {
            field: 'permissionCode',
            label: '权限标识',
            component: 'Input',
            rules: [{ max: 64, message: '权限代码不能超过64个字符', trigger: 'blur' }],
            itemProps: {
              extra: '用于检查登录用户是否有权限使用此模板',
            },
          },
          {
            field: 'remarks',
            label: '备注',
            component: 'InputTextArea',
            rules: [{ max: 1024, message: '备注不能超过1024个字符', trigger: 'blur' }],
          },
        ],
        showActionButtonGroup: false,
        baseColProps: { md: 24 },
      });

      const [registerDrawer, { changeLoading, closeDrawer }] = useDrawerInner(async (data) => {
        changeLoading(true);
        // 重置表单
        await resetFields();
        await setFieldsValue({ importTable: data.importTable });
        delete data.importTable;
        await setFieldsValue(data);
        changeLoading(false);
      });

      function handleTableChange(table) {
        const tableInfo = tableArray.filter((item) => item.value === table);
        if (tableInfo && tableInfo.length) {
          table = table.toLowerCase();
          const importCode = table.replace(new RegExp('_', 'g'), ':');
          setFieldsValue({
            importCode,
            name: tableInfo && tableInfo.length ? tableInfo[0].label : '',
            callback: `${underlineToHump(table)}ServiceImpl`,
            permissionCode: `${importCode}:import:data`,
          });
        }
      }

      /**
       * 下换下转驼峰
       *
       * @param tableName {string} 表名
       * @return {string} 驼峰命名
       */
      function underlineToHump(tableName: string) {
        const temp = tableName.split('_');
        let modelName;
        if (temp.length === 1) {
          modelName = tableName;
        } else {
          modelName = '';
          temp.map((item, index) => {
            if (index !== 0) {
              modelName +=
                item.substring(0, 1).toLocaleUpperCase() + item.substring(1, item.length);
            } else {
              modelName += item;
            }
          });
        }
        return modelName;
      }

      async function handleSubmit(callback: (_: SysImportExcelTemplate) => any) {
        try {
          changeLoading(true);
          await validate();
          await save(getFieldsValue() as SysImportExcelTemplate).then((res) => {
            message.success('保存成功');
            emit('success');
            callback(res);
          });
        } catch (e) {
          console.error(e);
          changeLoading(false);
        } finally {
          changeLoading(false);
        }
      }

      async function handleSave() {
        await handleSubmit((_) => {
          closeDrawer();
        });
      }

      async function handleSaveAndAdd() {
        await handleSubmit(async () => {
          // 重置表单
          await resetFields();
          await setFieldsValue({ startRow: 1 });
        });
      }

      return { registerDrawer, registerForm, handleSave, handleSaveAndAdd };
    },
  });
</script>
